<template>
  <div class="user">
    <!-- 一定是中横线 -->
    <USearch @query-click="userHandleQueryClick" @reset-click="userHandleResetClick" />
    <!-- <div class="content">
      <div class="header"></div>
      <div class="table"></div>
      <div class="paginition"></div>
    </div> -->
    <UContent ref="userContentRef" @new-click="HandleNewClick" @edit-click="HandleditClick" />
    <UModal ref="modalRef" @add-click="userHandleAddClick" />
    <!-- <Upload ref="uploadRef" /> -->
  </div>
</template>

<script setup lang="ts">
import USearch from './c-cpns/user-search.vue'
import UContent from './c-cpns/user-content.vue'
import UModal from './c-cpns/user-modal.vue'
import Upload from '../../../../components/upload/upload.vue'
import { ref } from 'vue'
import type UserContent from './c-cpns/user-content.vue'

// 对content组件进行操作  其中 userContentRef 必须和 <UContent ref="userContentRef" /> 中的ref的值保持一致
const userContentRef = ref<InstanceType<typeof UserContent>>()

function userHandleQueryClick(formData: any) {
  console.log('----------- 父页面查询', formData)
  console.log(userContentRef.value)

  userContentRef.value?.fetchUserListData(formData)
}

// 当子组件点击了这个函数后 在当前父组件监听到 立刻去触发兄弟组件的函数
function userHandleAddClick() {
  userContentRef.value?.fetchUserListData()
}

// 重置
function userHandleResetClick() {
  userContentRef.value?.fetchUserListData()
}

// 编辑
function HandleditClick(itemData) {
  console.log('编辑用户', itemData)
  modalRef.value?.setModalVisible(false, itemData.row)
  modalRef.value?.getDepartSel()
  modalRef.value?.getRoleSel()
  modalRef.value?.getToken()
}

// 对新增的modal操作 兄弟组件content传递给父组件，这里父组件再传给兄弟组件
const modalRef = ref<InstanceType<typeof UModal>>()
function HandleNewClick() {
  modalRef.value?.setModalVisible()
  modalRef.value?.getDepartSel()
  modalRef.value?.getRoleSel()
  modalRef.value?.getToken()
}
</script>

<style lang="less" scoped>
.user {
  color: red;
}
</style>
